<template>
	<page-wraper>
		<view>
			<wd-search hide-cancel @search="load" />

			<view style="margin-top: 15px;">
				<wd-status-tip image="search" tip="当前搜索无结果" v-if="list.length == 0" />
				
				<wd-card type="rectangle" :title="`订单号: ${item.po_number || ''}`" v-for="(item, index) in list"
					:key="index">
					<div style="text-align: center;">
						<wd-row>
							<wd-col :span="10">
								<div>{{ item.ship_from_country_code }}</div>
								<wd-text :text="item.ship_from_city" color="black" bold />
								<div>{{ item.ship_from_name }}</div>
							</wd-col>
							<wd-col :span="4">
								<div><wd-icon name="swap-right" size="20" /></div>
								<div>{{ item.package_count }} 件<!-- - {{ item.total_weight }} {{ item.weight_unit }} --></div>
								<div>{{ item.route_status }}</div>
							</wd-col>
							<wd-col :span="10">
								<div>{{ item.ship_to_country_code }}</div>
								<wd-text :text="item.ship_to_city" color="black" bold />
								<div>{{ item.ship_to_name }}</div>
							</wd-col>
						</wd-row>
					</div>
					<view style="margin-top: 10px;">
						<div><wd-text :text="`取件方式: ${collectTypes[item.collect_type - 1]}`"></wd-text></div>
						<div v-if="item.collect_type === 1">
							<wd-text :text="`取件时间: ${item.ship_date.substring(0, 10)} ${timeRanges[item.ship_time]}`"></wd-text>
						</div>
						<div v-if="item.master_tracking_number">
							<wd-text :text="`快递单号: ${item.master_tracking_number || '-'}`"></wd-text>
						</div>
						<div>
							<wd-text v-if="item.wait_for_pay_amount == 0">
								<template #prefix>
									费用:
									<span style="color: #007AFF; font-weight: bold;">
										{{item.charge}} {{item.currency}}
									</span>
								</template>
							</wd-text>
							<wd-text v-if="item.wait_for_pay_amount > 0">
								<template #prefix>
									待支付:
									<span style="color: #007AFF; font-weight: bold;">
										{{item.wait_for_pay_amount}} {{item.currency}}
									</span>
								</template>
							</wd-text>
						</div>
					</view>
					<template #footer>
						<view>
							<wd-button size="small" type="primary" custom-style="margin-right: 8px"
								@click="() => viewDetail(item.id)">订单详情</wd-button>
							<wd-button size="small" type="success" custom-style="margin-right: 8px"
								@click="() => payNow(item.id)" v-if="item.wait_for_pay_amount > 0 && item.order_status != 0">立即支付</wd-button>
							<wd-button size="small" type="error" custom-style="margin-right: 8px"
								@click="() => voidOrder(item.id)"
								v-if="item.order_status != 0 && (!item.route_status || item.route_status == '待揽收')">取消</wd-button>
						</view>
					</template>
				</wd-card>
			</view>
		</view>

		<wd-loadmore :state="state" @reload="load" />
	</page-wraper>

	<wd-popup v-model="pay_visible" position="bottom" closable :z-index="9999" :close-on-click-modal="false"
		custom-style="height: 300px; padding-top: 10px;">
		<view style="text-align: center; font-size: 14px;">
			选择支付方式
		</view>
		<demo-block title="" transparent>
			<wd-cell-group>
				<wd-cell size="large" is-link :to="`/pages/pay/Index?id=${pay_order_id}`" title="AsiaPay">
					<view style="font-size: 12px;">
						跳转第三方支付
					</view>
					<template #icon>
						<view class="cell-icon" style="background-image: url(https://www.ytad-pep.com/asiapay.png)"></view>
					</template>
				</wd-cell>
				<wd-cell size="large" is-link>
					<view style="color: gray; font-size: 12px;">
						暂未开通
					</view>
					<template #title>
						<view style="color: gray;">
							微信支付
						</view>
					</template>
					<template #icon>
						<view class="cell-icon" style="background-image: url(https://www.ytad-pep.com/wxpay.png);filter:brightness(0);opacity: 50%;"></view>
					</template>
				</wd-cell>
			</wd-cell-group>
		</demo-block>
	</wd-popup>

	<wd-fab type="primary" position="left-bottom" :expandable="false" @click="add"></wd-fab>
</template>
<script lang="ts" setup>
	import { ref, onUnmounted } from 'vue'
	import { onLoad, onReachBottom } from '@dcloudio/uni-app'
	
	const state = ref<any>('loading')
	const list = ref<any>([]);
	const pageIndex = ref(1);
	const pageSize = 20;
	const collectTypes = ['预约免费上门取件', '自行到门店投递'];
	const timeRanges = ref<any>({
		1: '上午 09:00-12:00',
		2: '下午 14:00-18:00'
	});
	const pay_visible = ref(false);
	const pay_order_id = ref('');
	const status = ref('');

	function add() {
		uni.navigateTo({ url: '/pages/order/Create' });
	}

	function viewDetail(id : number) {
		uni.navigateTo({ url: `/pages/order/Detail?id=${id}` });
	}

	function load({ value }) {
		state.value = 'loading';

		uni.$http.get(`user/order/list?page=${pageIndex.value}&limit=${pageSize}&sort=created&keywords=${value}&status=${status.value}`).then(res => {
			if (pageIndex.value == 1) {
				list.value = res.data.data || [];
			} else {
				list.value = list.value.concat(res.data.data || []);
			}

			if (list.value.length != pageSize) {
				state.value = 'finished';
			}
		})
	}

	function voidOrder(id) {
		uni.$http.post(`user/order/void`, { ids: [id] }).then(res => {
			if (res.data.code === 0) {
				uni.showToast({
					title: '取消成功',
					icon: 'success'
				});

				load({ value: '' });
			} else {
				uni.showToast({
					title: res.data.msg,
					icon: 'error'
				});
			}
		}).catch(e => {
			uni.showToast({
				title: e.message,
				icon: 'error'
			});
		});
	}

	function payNow(id) {
		/*#ifdef MP-WEIXIN*/
		pay_visible.value = true;
		pay_order_id.value = id;
		/*#endif*/

		/*#ifdef H5*/
		uni.$http.get(`user/order/payment_params/uni/${id}`).then(res => {
			const form = document.createElement('form');
			form.method = 'POST';
			form.action = res.data.data.url;

			for (const key in res.data.data.forms) {
				const input = document.createElement('input');
				input.type = 'hidden';
				input.name = key;
				input.value = res.data.data.forms[key];
				form.appendChild(input);
			}

			document.body.appendChild(form);

			form.submit();
		});
		/*#endif*/
	}

	onLoad((query: any) => {
		status.value = query.status;
		
		load({ value: '' });
	});

	onReachBottom(() => {
		pageIndex.value += 1;

		load({ value: '' });
	})

	uni.$on('refreshAddressBook', () => {
		load({ value: '' });
	});

	onUnmounted(() => {
		uni.$off('refreshAddressBook');
	});
</script>
<style lang="scss" scoped>
	.wot-theme-dark {
		.title-tip {
			color: rgba(232, 230, 227, 0.8);
		}

		.custom-main {
			color: $-dark-color;
		}

		.custom-sub {
			color: $-dark-color-gray;
		}
	}

	.content,
	.title {
		display: flex;
		flex-direction: row;
		justify-content: flex-start;
		align-items: center;
	}

	.content {
		justify-content: flex-start;
	}

	.title {
		justify-content: space-between;
	}

	.title-tip {
		color: rgba(0, 0, 0, 0.25);
		font-size: 12px;
	}

	.custom-main {
		color: rgba(0, 0, 0, 0.85);
		font-size: 16px;
	}

	.custom-sub {
		color: rgba(0, 0, 0, 0.25);
		font-size: 12px;
	}

	.cell-icon {
		display: block;
		box-sizing: border-box;
		width: 24px;
		height: 24px;
		margin-right: 4px;
		background-repeat: no-repeat;
		background-size: cover;
	}
</style>